<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            background-position 设置背景图片出现的位置
            1. 英文单词
            水平方向 left center right
            垂直方向 top center bottom
            水平方向和垂直方向的值没有顺序
            如果只设置一个值 另一个值默认为center

            2. 确切的值
            单位可以使px,em,rem,可以是负值
            如果只设置一个值就是表示水平方向的值，另一个值默认为center

            3. %(基于元素宽高的百分比) 可以是负值
            如果只设置一个值就是表示水平方向的值，另一个值默认为center
            水平方向 正值向右移动 负值向左
            垂直方向 正值向下移动 负值向上
        */
        div {
            width: 200px;
            height: 200px;
            border: 1px dashed red;
            padding: 10px;
            background-image: url(./2.png);
            background-repeat: no-repeat;
            background-position: top;
            background-position: 10px 20px;
            background-position: -10px -20px;
            background-position: 1em 1rem;
            background-position: -10% -20%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>